<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/css/clear.css">
    <link rel="stylesheet" href="/static/css/seat.css">
    <script src="/static/js/jquery-1.12.2.js"></script>

    <title>选座页面</title>
    <link rel="icon" href="/static/images/title-lolg.png">

    <style>
        #table {
            border: 1px solid wheat;
            width: 1200px;
        }

        #table tr {
            height: 40px;
        }

        #table tr td {
            width: 300px;
            text-align: center;
        }

        #gotoPay:hover
        {cursor:hand}
    </style>
</head>

<body>
<div th:replace="/common/head::#header"></div>
<!-- 页面主体 -->
<div class="container">
    <div class="nav-img" style="background: url(/static/images/order-pay.png)"></div>

    <div style="background-color: pink;height: 110px;width: 1200px;margin-top: 50px">
        <div id="show"></div>
    </div>

    <div style="margin-top: 50px">
        <p>请仔细核对场次信息，出票后将无法退票和改签</p>
        <table id="table">
            <tr style="background-color: #dedede">
                <td>影片</td>
                <td>时间</td>
                <td>影院</td>
                <td>座位</td>
            </tr>

            <tr style="height: 60px">
                <td th:text="${payVo.movieName}">影片</td>
                <td style="color: red" th:text="${payVo.startDate}">时间</td>
                <td th:text="${payVo.movieTheatreBrand+'('+payVo.movieTheatreName+')'}">影院</td>
                <td>
                    <span style="font-weight: 800" th:text="${payVo.videoHall}"></span>
                    <span style="margin: 5px" th:each="seat:${payVo.seats.split(',')}" th:text="${seat}"></span>
                </td>
            </tr>
        </table>
    </div>

    <input type="hidden" id="movieTheatreId" th:value="${payVo.movieTheatreId+''}">

</div>

<div style="margin-left:1100px;margin-top: 50px;height: 100px">
    <p>实际支付:<span style="font-size: 25px;color: red" th:text="${'￥'+payVo.price}"></span></p>
    <input type="submit" id="gotoPay"
           style="width: 200px;height: 50px;background-color: red;color: white;border-radius: 40px;margin-left: 10px;margin-top: 20px" value="确认支付"
           th:onclick="gotoPay([[${payVo.orderSn}]])" >

</div>



<!-- 页面底部 -->
<div th:replace="common/bottom::#bottom"></div>
</body>

<script>
    $(function () {
        TimeDown("show", [[${payVo.fromTime}]])
    });

    /*
     时间倒计时
     TimeDown.js
     */
    function TimeDown(id, value) {
        if (value<=0){
            alert("订单已过期 请重新下单")
            let movieTheatreId = $("#movieTheatreId").val();
            location.href="/movie/theatre/cinemaDetail/"+movieTheatreId;
        }

        //倒计时的总秒数
        var totalSeconds = parseInt(value / 1000);

        //取模（余数）
        var modulo = totalSeconds % (60 * 60 * 24);
        //小时数
        var hours = Math.floor(modulo / (60 * 60));
        modulo = modulo % (60 * 60);
        //分钟
        var minutes = Math.floor(modulo / 60);
        //秒
        var seconds = modulo % 60;

        hours = hours.toString().length == 1 ? '0' + hours : hours;
        minutes = minutes.toString().length == 1 ? '0' + minutes : minutes;
        seconds = seconds.toString().length == 1 ? '0' + seconds : seconds;

        //输出到页面
        document.getElementById(id).innerHTML = "<p style='font-size: 15px;line-height: 100px'>请在<span style='font-size: 25px;color: red'>" + minutes + "</span>分钟<span style='font-size: 25px;color: red'>" + seconds + "</span>秒内完成支付</p>";
        setTimeout(function () {
            TimeDown(id, value - 1000);
        }, 1000)
    }
    
    function gotoPay(orderSn) {
        location.href="/movie/order/alipay/"+orderSn;
    }
</script>

</html>